import { PureComponent } from "react";
import { connect } from 'react-redux'
import { Incrementaction } from "../store/createActors";
import { Decrementaction } from "../store/createActors";
import React from "react";
class About extends PureComponent
{
    addNum(num)
    {
        console.log(this.props);
        this.props.addNum(num);
    }

    subNum(num)
    {
        this.props.subNum(num);
    }
    
    render()
    {
    return (
        <div>
            <div>
                <h2>
                    About page
                </h2>
                <div>
                   counter:{this?.props?.counter}
                </div>
                <div>
                    {this.props.banners.map((item) => {
                        console.log("item:", item);
                        return (
                            <li key={item.title}>{item.title}</li>
                        )
                    })}
                </div>
                <button onClick={()=>this.addNum(1)}>+1</button>
                <button onClick={()=>this.addNum(5)} >+5</button>
                <button onClick={()=>this.addNum(10)}>+10</button>
           </div>
         </div>
       )
    }
}


const mapStatetoProps = (state) => {
    console.log("about里面的state：",state);
    return {
        counter: state.counter,
        banners: state.banners
    }
}

const mapDispatchtoProps = (dispatch) => {
    return {
        addNum:(num)=>
        {
           dispatch(Incrementaction(num))    
        },
        subNum:(num)=>
        {
            dispatch(Decrementaction(num));
        }
    }  
}

export default connect(mapStatetoProps,mapDispatchtoProps)(About);